<template>
	<div>{{ val || '--' }}</div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import { parserSelect, parserDatePicker, parserSwitch, parserCascader } from "./parser";
import { FormItemOptions } from "./type";
const props = defineProps<{
	item: FormItemOptions<any>;
}>();

const val = ref("");

onBeforeMount(async () => {
	val.value = await parserOption(props.item);
});

const parserOption = (item: FormItemOptions<any>) => {
	if (item.component === "Select") {
		return parserSelect(item);
	} else if (item.component === "DatePicker") {
		return parserDatePicker(item);
	} else if (item.component === "Switch") {
		return parserSwitch(item);
	} else if (item.component === "Cascader") {
		return parserCascader(item);
	}
	return item.value;
};
</script>

<style lang="scss" scoped></style>
